<template>
  <div class="work-calendar">
    <el-row type="flex" justify="end">
      <!-- 年份：渲染当前年份的前后5年即可 -->
      <el-select v-model="year" size="mini" @change="dateChange">
        <el-option
          v-for="item in yearList"
          :key="item"
          :value="item"
        />
      </el-select>
      <el-select v-model="month" size="mini" @change="dateChange">
        <el-option v-for="item in 12" :key="item" :value="item" />
      </el-select>
    </el-row>
    <!-- 日历组件 -->
    <el-calendar v-if="isShow" v-model="curDate">
      <template v-slot:dateCell="{date,data}">
        {{ data.day | formatDay }}
        <span v-if="isWeek(date)" class="week">休</span>
      </template>
    </el-calendar>
  </div>
</template>
<script>
const curDate = new Date() // 当前日期
const month = curDate.getMonth() + 1 // 当前日期月份
const year = curDate.getFullYear() // 当前年份
// 根据当前年份生成前后5年的年份列表数据
const yearList = []
for (let i = 0; i < 11; i++) {
  // // 第一轮循环 i=0
  // 2017 = year - 5  + i
  // // 第二轮循环 i=1
  // 2018 = year - 5 + i
  // // 第三轮循环 i=2
  // 2019 = year - 5 + i
  yearList.push(year - 5 + i)
}
export default {
  filters: { // 过滤器
    // 语法：
    // 自定义过滤器名字(val) {
    //   这个参数就是我们要转换的数据
    //   return 处理后的数据
    // }
    formatDay(val) { // 获取日
      if (!val) { return val }
      return +val.split('-')[2]
    }
  },
  data() {
    return {
      curDate, // 日期
      month, // 月份
      year, // 年份
      yearList, // 年份列表
      isShow: true // 控制日历组件的显示隐藏
    }
  },
  watch: {
    // 日历联动下拉框年月
    curDate(date) {
    //   console.log(46, '变化后的日期对象', date)
      this.year = date.getFullYear()
      this.month = date.getMonth() + 1
    },
    // 单独监听对象中的属性
    '$i18n.locale'() {
      // 解决 日历组件切换语言不实时更新问题
      // console.log('语言发生了变化')
      this.isShow = false
      this.$nextTick(() => {
        this.isShow = true
      })
    }
  },
  methods: {
    // 判断周末
    isWeek(date) {
      // 我们可以通过Date对象的getDay方法获取到周几
      // 当返回1-6的时候表示周一到周六，0的时候表示周日
      return date.getDay() === 6 || date.getDay() === 0
    },
    // 年月发生变化 联动日历组件
    dateChange() {
    //   console.log(this.year, this.month)
      this.curDate = new Date(`${this.year}-${this.month}`)
    }
  }
}
</script>
<style lang="scss" scoped>
// ::v-deep 这个是scss的样式穿透 语法
 ::v-deep .el-calendar-day {
  height:  auto;
  position: relative;
 }
 ::v-deep .el-calendar-table__row td,::v-deep .el-calendar-table tr td:first-child,  ::v-deep .el-calendar-table__row td.prev{
  border:none;
 }
.date-content {
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
.date-content .rest {
  color: #fff;
  border-radius: 50%;
  background: rgb(250, 124, 77);
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  font-size: 12px;
  margin-left: 10px;
}
.date-content .text{
  width: 20px;
  height: 20px;
  line-height: 20px;
 display: inline-block;

}
 ::v-deep .el-calendar-table td.is-selected .text{
   background: #409eff;
   color: #fff;
   border-radius: 50%;
 }
 ::v-deep .el-calendar__header {
   display: none
 }
.week{
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  background-color: #fa7c4d;
  color: #fff;
  text-align: center;
  font-size: 14px;
  position: absolute;
  left: 30px;
 }
</style>
